<template>
  <div>
    <el-table :data="data" style="width: 100%">
      <el-table-column prop="number" label="试题编号" width="180" />
      <el-table-column prop="subject" label="学科" width="120" />
      <el-table-column prop="catalog" label="目录" />
      <el-table-column prop="questionType" label="题型" width="130">
        <template #default="{ row }">
          <span>{{
            row.questionType === '1'
              ? '单选'
              : row.questionType === '2'
              ? '多选'
              : '简答'
          }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="question" label="题干" width="270">
        <template #default="{ row }">
          <div v-html="row.question" />
        </template>
      </el-table-column>
      <el-table-column prop="addDate" label="录入时间" width="180">
        <template #default="{ row }">
          <span>{{ row.addDtte | formatTime('YYYY-MM-DD') }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="difficulty" label="难度" width="130">
        <template #default="{ row }">
          <span>{{
            row.difficulty === '1'
              ? '简单'
              : row.difficulty === '2'
              ? '一般'
              : '困难'
          }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="creator" label="录入人" width="180" />
      <el-table-column prop="chkState" label="审核状态">
        <template #default="{ row }">
          <span>{{
            row.chkState === 1
              ? '已审核'
              : row.chkState === 2
              ? '已拒绝'
              : '待审核'
          }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="chkRemarks" label="审核意见" width="180" />
      <el-table-column prop="chkUser" label="审核人" width="180" />
      <el-table-column prop="publishState" label="发布状态">
        <template #default="{ row }">
          <span>{{
            row.publishState === 1
              ? '已发布'
              : row.publishState === 2
              ? '已下架'
              : '待发布'
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="230" fixed="right">
        <template #default="{ row }">
          <el-button type="text" @click="showDetailFn(row.id)">预览</el-button>
          <el-button
            type="text"
            :disabled="row.chkState === 1"
            @click="shenhe(row.id)"
            >审核</el-button
          >
          <el-button
            type="text"
            @click="editState(row.id, row.publishState, row.chkState)"
            >{{ row.publishState === 1 ? '上架' : '下架' }}</el-button
          >
          <span v-if="row.publishState === 0" style="margin-left: 15px">
            <el-button
              disabled
              type="text"
              @click="$router.push({ path: '/questions/new' })"
            >
              修改
            </el-button>
            <el-button disabled type="text" @click="delQuestionBank(row.id)">
              删除
            </el-button>
          </span>
          <span v-else style="margin-left: 15px">
            <el-button
              type="text"
              @click="$router.push({ path: '/questions/new' })"
              >修改</el-button
            >
            <el-button type="text" @click="delQuestionBank(row.id)">
              删除
            </el-button>
          </span>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="审核"
      :visible.sync="auditVisible"
      width="27%"
      :before-close="closeAuditFn"
    >
      <el-radio v-model="chkState" :label="1">通过</el-radio>
      <el-radio v-model="chkState" :label="2">拒绝</el-radio>
      <el-input
        v-model="chkRemarks"
        class="input"
        type="textarea"
        :rows="2"
        placeholder="请输入审核意见"
      />
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeAuditFn()">取 消</el-button>
        <el-button type="primary" @click="submitAuditFn()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import common from '@/constant/common'
import {
  delQuestionBankListApi,
  addreduceQuestionApi,
  QuestionDetailApi,
  questionAduitApi
} from '@/api/questionBank'
export default {
  components: {},
  props: {
    tableData: {
      type: Array
    },
    dialogVisible: {
      type: Boolean
    },
    tabchkState: {
      type: Number
    }
  },
  data() {
    return {
      data: [],
      questionType: common.questionType,
      auditVisible: false,
      id: '',
      chkState: '1',
      chkRemarks: ''

      //   questiondetai: {}
    }
  },
  computed: {},
  watch: {
    tableData: {
      handler() {
        this.data = this.tableData
      },
      deep: true
    }
  },
  created() {
    this.data = this.tableData
  },

  mounted() {},
  methods: {
    async delQuestionBank(id) {
      this.$confirm('此操作将永久删除该精选题, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await delQuestionBankListApi(id)
          this.$emit('getQuestionBankList')
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    async editState(id, publishState) {
      // console.log(chkState)

      let state = 0
      if (publishState === 1) {
        state = 0
      } else {
        state = 1
      }
      await addreduceQuestionApi(id, state)
      this.$message.success('操作成功')
      this.$emit('getQuestionBankList')
    },
    async showDetailFn(id) {
      const res = await QuestionDetailApi(id)
      //   this.questiondetai = res
      this.$emit('openDiola', res)
    },
    shenhe(id) {
      this.auditVisible = true
      this.id = id
    },
    closeAuditFn() {
      this.auditVisible = false
    },
    async submitAuditFn() {
      if (this.chkRemarks === '') {
        this.$message.success('cuowu')
        return
      }
      console.log(this.list)

      await questionAduitApi(this.id, this.chkState, this.chkRemarks)
      this.auditVisible = false
      this.$emit('getQuestionBankList')
    }
  }
}
</script>
<style scoped>
.input {
  margin-top: 20px;
}
</style>
